import React, { useRef } from 'react';
import styles from './index.module.less';
import { Link } from 'react-router-dom';
import classnames from 'classnames';
import OptionsNav from '@/components/options-nav-hp';
const CREATE_IMG = require('@/assets/images/add.png');


const FooterNav: React.FC<any> = (props) => {
  // 这个是啥?
  // MutableRefObject泛型接口，接收一个参数，作为useRef的类型定义,参数可以为T类型，即任意类型
  // useRef又是啥?
  // useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。

  //  useState, useEffect, useMemo, useRef 都有什么用
  const navRef: React.MutableRefObject<any> = useRef();

  const setActiveName = (path: string): string => {
    return props.match?.path === path ? styles['active'] : '';
  };

  const handleNavShow = () => {
    navRef.current.toggleVisible();
  };
  setActiveName('/home');
  handleNavShow;

  // Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

  // classnames {styles.xxx1, styles.xxx2}, 可以通过隐藏的true false或者''控制
  // 样式是否生效
  return (
    <React.Fragment>
      <div className={styles['nav']}>
        <Link className={classnames(styles['nav-item'], setActiveName('/home'))} to='/home'>
          <i className={classnames('iconfont', 'icontab_icon_home_off', styles['icon'])}></i>
          <span className={classnames(styles['icon-text'])}>首页</span>
        </Link>
        <div className={classnames(styles['nav-item'])} onClick={handleNavShow}>
          <img src={CREATE_IMG} alt="" className={styles['create']} />
        </div>
        <Link className={classnames(styles['nav-item'], setActiveName('/personal-center'))} to='/personal-center'>
          <i className={classnames('iconfont', 'icontab_icon_home_off2', styles['icon'])}></i>
          <span className={classnames(styles['icon-text'])}>我的</span>
        </Link>
      </div>
      <OptionsNav ref={navRef}></OptionsNav>
    </React.Fragment>
  );
}

export default FooterNav;